<template>
  <div class="fillContainer">
    <div class="sh">
      <el-form :inline="true" ref="add_data" :model="search_data">
        <!-- 筛选 -->
        <el-form-item label="按照时间筛选：">
          <el-date-picker v-model="search_data.startTime" type="datetime" placeholder="选择开始日期时间">
          </el-date-picker>
          ---
          <el-date-picker v-model="search_data.endTime" type="datetime" placeholder="选择结束日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="search" @click="handleSearch()">筛选
          </el-button>
        </el-form-item>

        <el-form-item class="btnRight">
          <el-button type="primary" size="small" icon="view" v-if="user.identify == '管理员'" @click="handleAdd()">添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-if="tableData.length > 0" :data="tableData" border style="width: 100%" max-height="320">
      <el-table-column prop="id" align="center" label="序号" width="60">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" align="center" label="创建时间" width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createtime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" align="center" label="收支类型" width="100">
      </el-table-column>
      <el-table-column prop="description" align="center" label="收支描述" width="120">
      </el-table-column>
      <el-table-column prop="income" align="center" label="收入" width="80">
        <template slot-scope="scope">
          <span style="color: greenyellow">{{ scope.row.income }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expenditure" align="center" label="支出" width="80">
        <template slot-scope="scope">
          <span style="color: red">{{ scope.row.expenditure }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="account" align="center" label="账户现金" width="80">
        <template slot-scope="scope">
          <span style="color: green">{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" align="center" label="备注" width="160">
      </el-table-column>

      <el-table-column label="操作" prop="operation" align="center" v-if="user.identify == '管理员'">
        <template slot-scope="scope">
          <el-button type="warning" icon="edit" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" icon="delete" size="small"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row>
      <el-col :span="24">
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="paginations.page_index" :page-sizes="paginations.page_sizes"
            :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <Dialog :dialog="dialog" :formData="formData" @update="allFunds"></Dialog>
  </div>
  <!-- </div> -->
</template>

<script>
// import HeadNav from '../components/HeadNav.vue'
// import LeftMenu from '../components/LeftMenu.vue'
import Dialog from '../components/DiaLog.vue'
export default {
  name: 'fundlist',
  // components: {
  //   HeadNav,
  //   LeftMenu
  // },
  data() {
    return {
      search_data: {
        startTime: '',
        endTime: ''
      },
      fillterTableData: [],
      paginations: {
        page_index: 1,//当前位于哪页
        toal: 0,//总数
        page_size: 5,//一页显示多少条
        page_sizes: [5, 10, 15, 20],//每页显示多少条
        layout: "total,sizes,prev,pager,next,jumper"//翻页属性
      },
      tableData: [],
      allTableData: [],
      formData: {
        type: "",
        description: "",
        income: "",
        expenditure: "",
        account: "",
        remark: "",
        id: "",
      },
      dialog: {
        show: false,
        title: '',
        option: 'edit'
      }
    }
  },
  computed: {
    user() {
      return this.$store.getters.user;
    }
  },
  created() {
    this.allFunds();
  },
  methods: {
    allFunds() {
      this.$axios.get('/api/funds/allFunds')
        .then(res => {
          this.allTableData = res.data;
          this.fillterTableData = res.data;
          //设置分页数据
          this.setPaginations();
          // console.log(res);
        })
        .catch(err => console.log(err))
    },
    setPaginations() {
      //分页属性设置
      this.paginations.total = this.allTableData.length;
      this.paginations.page_size = 5;
      this.paginations.page_index = 1;
      //设置默认的分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      })
    },
    handleEdit(index, row) {
      this.dialog = {
        show: true,
        title: '修改资金信息',
        option: 'edit'
      };
      this.formData = {
        type: row.type,
        description: row.description,
        income: row.income,
        expenditure: row.expenditure,
        account: row.account,
        remark: row.remark,
        id: row.id
      }
    },
    handleDelete(index, row) {
      // console.log(456)
      this.$axios.post(`/api/funds/delete/${row.id}`).then(res => {
        this.$message('删除成功')
        this.allFunds();
      })
    },
    handleAdd() {
      this.dialog.show = true,
        this.dialog = {
          show: true,
          title: '添加资金信息',
          option: 'add'
        };
      this.formData = {
        type: "",
        description: "",
        income: "",
        expenditure: "",
        account: "",
        remark: "",
        id: "",
      }
    },
    handleSizeChange(page_size) {
      //切换size
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      })
    },
    handleCurrentChange(page) {
      //获取当前页
      let index = this.paginations.page_size * (page - 1);
      let nums = this.paginations.page_size * page;
      //容器
      let tables = [];
      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) {
          tables.push(this.allTableData[i]);
        }
        this.tableData = tables;
      }
    },
    handleSearch() {
      //筛选
      if (!this.search_data.startTime || !this.search_data.endTime) {
        this.$message({
          type: 'warning',
          message: '请选择时间区间'
        });
        this.allFunds();
        return;
      }
      const sTime = this.search_data.startTime.getTime();
      const eTime = this.search_data.endTime.getTime();
      this.allTableData = this.fillterTableData.filter(item => {
        let date = new Date(item.createtime)
        let time = date.getTime()
        return time > sTime && time <= eTime
      });
      this.setPaginations();
    },
  },

  components: {
    Dialog
  }
}
</script>

<style>
.sh {
  margin-top: 10px;
  margin-left: 10px;
}

.btnRight {
  float: right;
}

.pagination {
  text-align: right;
  margin-top: 10px;
  margin-right: 40px;
}
</style>